<template>
  <el-dialog
      title="选择所属组织"
      :visible.sync="dialogTreeVisible"
      width="30%"
      :close-on-click-modal="false"
      :append-to-body="true">
    <el-tree
        style="padding-bottom: 30px"
        :data="treeData"
        node-key="id"
        :expand-on-click-node="false"
        :default-expand-all="true"
        :highlight-current="true"
        @node-click="nodeClick"
        :default-expanded-keys="[1, 1]"
        :default-checked-keys="[5]"
        :props="defaultProps">
    </el-tree>
    <el-button @click="dialogTreeVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogTreeVisible = false">确 定</el-button>
  </el-dialog>
</template>

<script>
export default {
  name: "UserOrgTreeDialog",
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'orgName'
      }
    }
  },
  computed: {
    dialogTreeVisible: {
      get() {
        return this.$store.state.user.dialogTreeVisible;
      },
      set(value) {
        this.$store.state.user.dialogTreeVisible = value;
      }
    },
    treeData: {
      get() {
        return this.$store.state.user.treeData;
      }
    }
  },
  methods: {
    nodeClick(data){
      this.$store.state.user.userForm.belongOrg = data.id;
      this.$store.state.user.userForm.belongOrgName = data.orgName;
    }
  }
}
</script>

<style scoped>

</style>